<template>
  <div class="test-page">
    <h1>🧪 测试页面</h1>
    <p>如果您能看到这个页面，说明路由和组件加载正常。</p>
    
    <div class="test-cards">
      <el-card class="test-card">
        <h3>✅ 基础功能测试</h3>
        <p>当前时间: {{ currentTime }}</p>
        <p>随机数字: {{ randomNumber }}</p>
      </el-card>
      
      <el-card class="test-card">
        <h3>🎨 UI组件测试</h3>
        <el-button type="primary" @click="showMessage">点击测试按钮</el-button>
        <el-button type="success">成功按钮</el-button>
        <el-button type="warning">警告按钮</el-button>
      </el-card>
      
      <el-card class="test-card">
        <h3>📊 数据格式化测试</h3>
        <p>格式化数字: {{ formatNumber(1234567) }}</p>
        <p>格式化金额: ¥{{ formatNumber(610000) }}</p>
      </el-card>
    </div>
    
    <div class="navigation">
      <h3>🧭 导航测试</h3>
      <el-button @click="goToDashboard">前往系统首页</el-button>
      <el-button @click="goToUsers">前往用户管理</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()
const currentTime = ref('')
const randomNumber = ref(0)

// 格式化数字
const formatNumber = (num) => {
  return num.toLocaleString()
}

// 显示消息
const showMessage = () => {
  ElMessage.success('按钮点击成功！')
}

// 导航函数
const goToDashboard = () => {
  router.push('/dashboard')
}

const goToUsers = () => {
  router.push('/users')
}

onMounted(() => {
  // 更新时间
  const updateTime = () => {
    currentTime.value = new Date().toLocaleString()
  }
  
  // 生成随机数
  const updateRandom = () => {
    randomNumber.value = Math.floor(Math.random() * 10000)
  }
  
  updateTime()
  updateRandom()
  
  // 每秒更新
  setInterval(() => {
    updateTime()
    updateRandom()
  }, 1000)
})
</script>

<style scoped>
.test-page {
  padding: 24px;
  max-width: 800px;
  margin: 0 auto;
}

.test-page h1 {
  color: #333;
  text-align: center;
  margin-bottom: 20px;
}

.test-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin: 20px 0;
}

.test-card {
  text-align: center;
}

.test-card h3 {
  margin-bottom: 15px;
  color: #409EFF;
}

.test-card p {
  margin: 10px 0;
  font-size: 14px;
}

.navigation {
  margin-top: 30px;
  text-align: center;
  padding: 20px;
  background: #f5f5f5;
  border-radius: 8px;
}

.navigation h3 {
  margin-bottom: 15px;
  color: #333;
}

.navigation .el-button {
  margin: 0 10px;
}
</style>
